import { Menu } from "antd"
import React from "react"
import styles from "./SideMenu.module.css"
import { sideMenuList } from "./mockup"
import { TwitterSquareFilled } from "@ant-design/icons"

const SideMenu: React.FC = () => {
	return (
		<Menu mode="vertical" className={styles["side-menu"]}>
			{sideMenuList.map((m, index) => (
				<Menu.SubMenu
					key={`side-menu-${index}`}
					title={
						<span>
							<TwitterSquareFilled />
							{m.title}
						</span>
					}
				>
					{m.subMenu.map((sm, smIndex) => (
						<Menu.SubMenu
							key={`side-submenu-${index}-${smIndex}`}
							title={
								<span>
									<TwitterSquareFilled />
									{sm.title}
								</span>
							}
						>
							{sm.subMenu.map((sms, smsIndex) => {
								return (
									<Menu.Item key={`side-menu-item-${index}-${smIndex}-${smsIndex}`}>
										<span>
											<TwitterSquareFilled />
											{sms}
										</span>
									</Menu.Item>
								)
							})}
						</Menu.SubMenu>
					))}
				</Menu.SubMenu>
			))}
		</Menu>
	)
}

export default SideMenu
